<!--单次作答详情-->
<template>
  <div id="myScoreDetail">
    <div class="title"></div>
    <div class="wrapper">
      <ul class="top">
        <li class="order">作答详情</li>
      </ul>

      <!-- 显示考试作答详情列表 -->
      <div class="score-list">
        <el-row :gutter="20">
          <el-col v-for="(item, index) in pagination.records" :key="index" :span="24" class="score-item">
            <el-card shadow="hover" class="score-card">
              <el-row>
                <el-col :span="8">
                  <p><strong>题目类型:</strong> {{ item.type }}</p>
                </el-col>
                <el-col :span="16">
                  <p><strong>题目内容:</strong> {{ item.description }}</p>
                </el-col>
              </el-row>
              <el-divider></el-divider>
              <el-row>
                <el-col :span="8">
                  <p><strong>你的答案:</strong> {{ item.answer }}</p>
                </el-col>
                <el-col :span="8">
                  <p><strong>正确答案:</strong> {{ item.correctAnswer }}</p>
                </el-col>
                <el-col :span="8">
                  <p><strong>得分:</strong> {{ item.score }}</p>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <p><strong>正确性:</strong>
                    <el-tag :type="(item.answer == item.correctAnswer) ? 'success' : 'danger'">
                      {{ (item.answer == item.correctAnswer) ? '✅ 正确' : '❌ 错误' }}
                    </el-tag>
                  </p>
                </el-col>
              </el-row>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <!-- Element-UI自带库 -->
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagination.current"
          :page-sizes="[5, 10, 20]"
          :page-size="pagination.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      key: null, //搜索关键字
      allDetail: null, //所有考试信息
      pagination: { //分页后的考试信息
        current: 1, //当前页
        total: null, //记录条数
        size: 6 ,//每页条数
      }
    }
  },
  created() {
    this.getDetails()
    this.loading = true
  },

  methods: {
    // 获取作答详情
    getDetails() {
      this.$axios(`/api/answerDetails/${this.pagination.current}/${this.pagination.size}`).then(res => {
        this.pagination = res.data.data
        this.loading = false
        console.log(this.pagination)
      }).catch(error => {
        console.log(error)
      })
    },
    // 改变页大小
    handleSizeChange(val) {
      this.pagination.size = val
      this.getDetails()
    },
    // 改变页码
    handleCurrentChange(val) {
      this.pagination.current = val
      this.getDetails()
    },

  }
}
</script>

<style lang="less" scoped>
.pagination {
  padding: 20px 0px 30px 0px;
  .el-pagination {
    display: flex;
    justify-content: center;
  }
}
.paper {
  h4 {
    cursor: pointer;
  }
}
.paper .item a {
  color: #000;
}
.wrapper .top .order {
  cursor: pointer;
  font-weight: bold;
}
.wrapper .top .order:hover {
  color: #0195ff;
  border-bottom: 2px solid #0195ff;
}
.wrapper .top .order:visited {
  color: #0195ff;
  border-bottom: 2px solid #0195ff;
}
.item .info i {
  margin-right: 5px;
  color: #0195ff;
}
.item .info span {
  margin-right: 14px;
}
.paper .item {
  width: 380px;
  border-radius: 4px;
  padding: 20px 30px;
  border: 1px solid #eee;
  box-shadow: 0 0 4px 2px rgba(217,222,234,0.3);
  transition: all 0.6s ease;
}
.paper .item:hover {
  box-shadow: 0 0 4px 2px rgba(140, 193, 248, 0.45);
  transform: scale(1.03);
}
.paper .item .info {
  font-size: 14px;
  color: #88949b;
}
.paper .item .name {
  font-size: 14px;
  color: #88949b;
}
.paper * {
  margin: 20px 0;
}
.wrapper .paper {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.top .el-icon-search {
  position: absolute;
  right: 10px;
  top: 10px;
}
.top .icon {
  position: relative;
}
.wrapper .top {
  border-bottom: 1px solid #eee;
  margin-bottom: 20px;
}
#myScoreDetail .search-li {
  margin-left: auto;
}
.top .search-li {
  margin-left: auto;
}
.top li {
  display: flex;
  align-items: center;
}
.top .search {
  margin-left: auto;
  padding: 10px;
  border-radius: 4px;
  border: 1px solid #eee;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
.top .search:hover {
  color: #0195ff;
  border-color: #0195ff;
}
.wrapper .top {
  display: flex;
}
.wrapper .top li {
  margin: 20px;
}
#myScoreDetail {
  width: 980px;
  margin: 0 auto;
}
#myScoreDetail .title {
  margin: 20px;
}
#myScoreDetail .wrapper {
  background-color: #fff;
}
</style>
